<template>
  <div class="pending">
    <el-form
      :inline="true"
      :model="query"
    >
      <el-form-item label="活动名称">
        <el-input
          v-model="query.discountName"
          maxlength="15"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.state" placeholder="请选择状态">
          <el-option label="全部" value="null" />
          <el-option label="未开始" value="0" />
          <el-option label="进行中" value="1" />
          <el-option label="已结束" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="clear">重置</el-button>
        <el-button type="primary" @click="addActivity">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{
        background: '#EEF3FF',
        color: '#333333'
      }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
    >
      <el-table-column label="活动名称" width="220">
        <template #default="scope">{{ scope.row.discountName }}</template>
      </el-table-column>
      <el-table-column label="状态" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.state === 0">未开始</span>
          <span v-if="scope.row.state === 1">进行中</span>
          <span v-if="scope.row.state === 2">已结束</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="活动内容"
        show-overflow-tooltip
      />
      <el-table-column
        prop="startTime"
        label="活动开始时间"
        show-overflow-tooltip
      />
      <el-table-column
        prop="endTime"
        label="活动结束时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <div class="btnList">
            <el-button
              v-if="scope.row.state === 0"
              type="primary"
              link
              @click="editActivity(scope.row.shopDiscountId)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.state !== 0"
              type="primary"
              link
              @click="visitActivity(scope.row.shopDiscountId)"
            >详情</el-button>
            <el-button
              v-if="scope.row.state !== 0"
              type="primary"
              link
              @click="showData(scope.row.shopDiscountId)"
            >数据</el-button>
            <el-popconfirm
              v-if="scope.row.state === 0 || scope.row.state === 2"
              title="确定删除此活动？"
              @confirm="delDiscountFn(scope.row.shopDiscountId)"
            >
              <template #reference>
                <el-button
                  class="delCls"
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 1"
              title="确定停止此活动？"
              @confirm="stopFn(scope.row.shopDiscountId)"
            >
              <template #reference>
                <el-button
                  class="delCls"
                  link
                  type="danger"
                >停止</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="page.total"
      style="margin: 12px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增活动 -->
    <DiscountForm
      ref="discountFormRef"
      @reset="reset"
    />
    <!-- 数据效果弹框 -->
    <el-dialog
      v-model="visible.detail"
      :close-on-click-modal="false"
      title="数据效果"
      width="55%"
      top="50px"
      class="group-dialog"
    >
      <!-- 表格 -->
      <div class="dataEffect">
        <h3>实时统计</h3>
        <div class="couponTit">活动名称：{{ detailData.discountName }}</div>
        <div class="dataListBox">
          <div class="dataItem">
            <span>{{ detailData.visit }}</span>
            <p>浏览量</p>
          </div>
          <div class="dataItem">
            <span>{{ detailData.pays }}</span>
            <p>支付买家数</p>
          </div>
          <div class="dataItem">
            <span>{{ detailData.conversion }}</span>
            <p>支付转化率</p>
          </div>
          <div class="dataItem">
            <span>￥{{ detailData.total }}</span>
            <p>活动成交金额</p>
          </div>
        </div>
        <div class="tabListInfo">活动成交的商品</div>
        <div class="tableBox">
          <el-table
            :data="detailData.products.list"
            border
            height="150"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              prop="productName"
              label="商品名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="number"
              label="付款件数"
              show-overflow-tooltip
            />
            <el-table-column
              prop="users"
              label="付款人数"
              show-overflow-tooltip
            />
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page="detailPage.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="detailPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="detailPage.total"
              @size-change="activeDataSizeChange"
              @current-change="activeDataCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'

import DiscountForm from '@/views/marketing/discount/form.vue'

import { useActivityHooks } from '@/views/marketing/hooks/dialogHooks.js'

import {
  getDiscountData,
  deleteDiscount,
  stopDiscount,
  getDiscountInfo,
} from '@/api/marketing'

defineComponent({
  name: 'ActivityDiscount'
})

const discountFormRef = ref(null)
const {
  addActivity,
  editActivity,
  visitActivity,
  reset,
} = useActivityHooks({
  ref: discountFormRef,
  resetCallbck: getAll
})
let visible = reactive({
  detail: false,
})
let loading = reactive({
  table: false,
})

let query = reactive({
  state: null, // 折扣状态
  discountName: '', // 折扣活动名称
  startTime: '', // 创建时间开始时间
  endTime: '', // 创建时间结束时间
});
let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});

let tableData = ref([]);
// 初始化查询所有数据
function getAll () {
  loading.table = true
  getDiscountData({
    page: page.page,
    pageSize: page.pageSize,
    ...query
  }).then(res => {
    page.total = res.data.total
    tableData.value = res.data.list
  }).finally(() => {
    loading.table = false
  })
}
//  查询
function search () {
  page.page = 1
  getAll()
}
// 清除
function clear () {
  query.discountName = ''
  query.startTime = ''
  query.endTime = ''
  query.state = null
  getAll()
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}
function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

// 停止秒杀活动
function stopFn (id) {
  stopDiscount({
    shopDiscountId: id
  }).then((res) => {
    if (res.code === '') {
      ElMessage.success('停止成功')
      search()
    } else {
      ElMessage.error(res.message)
    }
  })
}

// 删除折扣
function delDiscountFn (id) {
  deleteDiscount({
    shopDiscountId: id
  }).then((res) => {
    if (res.code === '') {
      ElMessage.success('删除成功')
      search()
    } else {
      ElMessage.error(res.message)
    }
  })
}

let detailPage = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
let detailQuery = reactive({})
let detailData = ref({
  products: {
    list: []
  }
})
// 显示数据效果
function showData (id) {
  getActiveData(id)
  visible.detail = true
}
// 获取活动数据
function getActiveData (id) {
  if (id) {
    detailQuery.shopSeckillId = id
  }
  getDiscountInfo(Object.assign(
    {},
    detailPage,
    detailQuery
  )).then((res) => {
    if (res.code === '') {
      detailData.value = res.data
    } else {
      ElMessage.error(res.message)
    }
  })
}
function activeDataCurrentChange (val) {
  detailPage.page = val
  getActiveData()
}
function activeDataSizeChange (val) {
  detailPage.pageSize = val
  getActiveData()
}

onMounted(() => {
  getAll()
})
</script>

<style lang="scss" scoped>
.pending {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
.dataEffect {
  .couponTit {
    margin: 20px 0;
  }
  .dataListBox {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    .dataItem {
      width: 220px;
      height: 120px;
      border-radius: 8px;
      border: 1px solid #999999;
      text-align: center;
      margin: 0 10px;
      span {
        display: block;
        margin-top: 35px;
      }
    }
  }
  .tabListInfo {
    margin: 20px 0;
  }
}
.pagination {
  padding-top: 20px;
}
</style>

<style scoped>
:deep(.btnList) .delCls {
  margin-left: 10px;
}
:deep(.group-dialog) .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
</style>
